<template>
  <div>
    <el-form :inline="true" size="small" :model="importJson" class="demo-form-inline">
      <el-form-item label="上传限制大小/KB">
        <el-input-number controls-position="right" v-model="importJson.size" />
      </el-form-item>
      <el-form-item label="上传限制数量/条">
        <el-input-number controls-position="right" v-model="importJson.num" />
      </el-form-item>
    </el-form>
    <el-divider content-position="left">模版设置</el-divider>
    <el-table
        :data="importJson.fields"
        height="65vh"
        row-key="id"
        border
        stripe
        style="width: 100%"
    >
      <el-table-column type="expand">
        <template #default="scope">
          <el-form :inline="true" size="small" :model="scope" class="demo-form-inline">
            <span v-if="scope.row.isShow">
              <el-form-item label="参数规则校验">
                <JsonEditView style="width: 750px" v-model="scope.row.serviceRule" />
              </el-form-item>

              <!--类型配置-->
              <el-form-item v-if="scope.row.type.value === 'select'" label="选项数据源">
                <el-select
                    v-model="scope.row.type.select.optionId"
                    filterable
                    placeholder="Select"
                    size="small"
                    style="width: 160px"
                >
                  <el-option
                      v-for="(item, index) in options.options"
                      :key="index"
                      :label="item.name"
                      :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </span>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="关联网格字段" width="230" prop="type">
        <template #default="scope">
          <el-select
              v-model="scope.row.gridField"
              filterable
              @change="selectField($event, scope.row)"
              placeholder="未关联"
              size="small"
          >
            <el-option
                v-for="item in fieldJsonCopy"
                :key="item.field"
                :label="item.label"
                :value="item.field"
                :disabled="item.disabled"
            >
              <span style="float: left">{{ item.label }}</span>
              <span style="float: right; color: var(--el-text-color-secondary); font-size: 13px">
                {{ item.field }}
              </span></el-option
            >
          </el-select>
        </template>
      </el-table-column>
      <el-table-column
          label="启用"
          prop="isShow"
          width="70"
          :filters="[
          { text: '显示', value: true },
          { text: '隐藏', value: false }
        ]"
          :filter-method="filterHandler"
      >
        <template #default="scope">
          <el-switch size="small" v-model="scope.row.isShow" />
        </template>
      </el-table-column>
      <el-table-column label="别名" prop="name">
        <template #default="scope">
          <el-input v-model="scope.row.alias" size="small" clearable />
        </template>
      </el-table-column>
      <el-table-column label="字段名" prop="field">
        <template #default="scope">
          <el-input
              v-model="scope.row.field"
              :disabled="!!scope.row.gridField"
              size="small"
              clearable
          />
        </template>
      </el-table-column>
      <el-table-column label="类型" width="110" prop="type">
        <template #default="scope">
          <el-select v-model="scope.row.type.value" placeholder="Select" size="small">
            <el-option
                v-for="(item, index) in editTypes"
                :key="index"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="170" prop="isSort">
        <template #default="scope">
          <OperationView v-model="importJson.fields" :scope />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script lang="ts" setup>
import JsonEditView from '@/views/template/util/JsonEditView.vue'
import OperationView from './OperationView.vue'
import { ref } from 'vue'
import { useOptionDataStore } from '@/stores/optionData'
import { storeToRefs } from 'pinia'
const storeOptionData = useOptionDataStore()
const { options } = storeToRefs(storeOptionData)
// 字段配置列表
const props = defineProps(['fieldJson'])
// 解除与 fieldJson 双向绑定，改为单向
const fieldJsonCopy = ref(JSON.parse(JSON.stringify(props.fieldJson)))
const importJson = defineModel({ default: { size: 100, num: 100, fields: [] } })
// const importJson = {
//   size: 100,
//   num: 100,
//   fields: [
//     {
//       isShow: true,
//       field: 'default',
//       alias: '别名',
//       type: {
//         value: 'select',
//         select: {
//           optionId: '',
//           options: [
//             {
//               label: '',
//               value: ''
//             }
//           ]
//         }
//       },
//       gridField: null, // 绑定网格字段,
//       serviceRule: {required: true}
//     }
//   ]
// }
// 编辑数据类型
const editTypes = [
  {
    value: 'text',
    label: '文本'
  },
  {
    value: 'select',
    label: '选项'
  }
]
// 初始化一些数据
load()
function load() {
  // 初始化选项列表
  storeOptionData.refreshOptions()
  // 已选择的关联字段标记为不可选
  importJson.value.fields.forEach((item) => {
    fieldJsonCopy.value.forEach((item2) => {
      if (item.field === item2.field) {
        item2.disabled = true
      }
    })
  })
}

function selectField(selectfield, field) {
  fieldJsonCopy.value.forEach((item) => {
    if (item.field === selectfield) {
      // 该字段标记为不可选
      item.disabled = true
      // 释放原绑定对象网格字段为可选
      if (field.gridField) {
        fieldJsonCopy.value.forEach((item2) => {
          if (item2.field === field.field) {
            item2.disabled = false
          }
        })
      }
      // 配置同步网格字段
      field.field = item.field
      field.alias = item.label
      field.type.value = editTypes[0].value
    }
  })
}
// 过滤字段
function filterHandler(value, row, column) {
  return row.isShow === value
}
</script>
<style scoped>
.el-form {
  margin: 0px 10px;
}
:deep(.el-table__expanded-cell) {
  background-color: hsl(0, 0%, 95%) !important;
}
:deep(.jsoneditor-vue) {
  height: 300px !important;
}
</style>
